@use "sass:color";
@use "../../../vars";

.popular_tracks_container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;

  margin: 0 0.5rem;

  .header {
    margin-bottom: 1rem;

    font-size: 24px;
    font-variant: all-small-caps;
  }

  .popular_tracks_table_container {
    height: calc(48px + (42px * 5)); // header + 5 rows

    &.expanded {
      height: auto;
    }
  }

  .expand_button {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    transition: vars.$short-duration;
    cursor: pointer;

    &:hover {
      background: color.adjust(vars.$background, $lightness: 5%);
    }
  }

  .ui.button.add_all_button {
    text-align: left;
    margin-bottom: 0.5rem;
    max-width: 10em;
  }
}
